<!DOCTYPE html>
<html>
	<head>
		<title>王牌飞行员</title>
		<meta charset="utf-8">
		<style>
			*{padding:0;margin:0;}			
			#box{width:500px;height:700px;position:relative;border:1px solid black;overflow:hidden;
					background:url(img/bj1.jpg);background-position:0px 0px;float:left;left:20px;}
			#me{width:130px;height:65px;position:absolute;}			
			#bz{width:120px;height:120px;position:absolute;display:none;}
			.xinjian{width:120px;height:120px;position:absolute;top:-120px;}
			.zd{width:10px;height:35px;position:absolute;}
			#boxright{width:150px;height:700px;border:1px solid black;float:right;}
			#boxleft{width:150px;height:700px;border:1px solid black;float:left;}
			#boxbig{width:850px;height:700px;margin:20px auto;}
			tr{;line-height:30px;font-size:14px;}
			.an{width:120px;height:40px;background:#FD6D25;border-radius:10px;cursor:pointer;line-height:40px;text-align:center;margin:10px auto;font-size:16px;}
			.an:hover{font-size:17px;background:#F78950;}
		</style>
	</head>
	<body>
		<div id="boxbig">
			<div id="boxleft">
				<br><br><br>
				<div class="an" onclick="fjdj1()" >战机升级1</div>
				<div class="an" onclick="fjdj2()" >战机升级2</div>
				<div class="an" onclick="fjdj3()" >战机升级3</div>
				<br><br><br>
				<div class="an" onclick="nddj1()" >难度等级1</div>
				<div class="an" onclick="nddj2()" >难度等级2</div>
				<div class="an" onclick="nddj3()" >难度等级3</div>				
			</div>
		<div id="box">
			<div id="me"><img src="img/m2.png"></div> <!-- 我的飞机 -->
			<div id="bz"><img src="img/bz.gif" width="100%"></div>
		</div>
			<div id="boxright">				
				<table width="150px" height="400px">
					<tr height="40px" ><td colspan="2"> <b>&emsp;操作方式</b><hr></td></tr>
					<tr height="50px"><td width="70px"><img src="img/other.png"></td><td>移动</td></tr>
					<tr height="50px"><td><img src="img/other2.png"></td><td>发射子弹</td></tr>
					<tr height="40px"><td colspan="2"><hr><b>&emsp;游戏目标</b><hr></td></tr>
					<tr height="100px"><td colspan="2">&emsp;&emsp;使用方向键移动战机，空格键发射子弹，摧毁敌方战舰</td></tr>
					<tr height="40px"><td colspan="2"><hr><b>&emsp;版权所有:</b></td></tr>
					<tr height="40px"><td colspan="2" style="font-size:18px">&emsp;&copy; 谢成龙</td></tr>
				</table>
			</div>	
		</div>
		<script>
			var meyd = 5 ; //我的飞机移动速度
			var meT = null;  //飞机的定时器
			var bjgdsj = 10;  //背景滚动时间
			var zdsd = 5; var zdjl = 2; //子弹飞行速度
			var fjyd = 10; var ydjl = 3;  //敌方飞机移动速度和距离
			var scfj = 1500; //敌方飞机生成速度
			
			var box=document.getElementById("box"); //飞机的初始位置
			var me=document.getElementById("me");
			var me_left=box.offsetWidth/2 - me.offsetWidth/2;
			me.style.left=me_left+"px";  //横坐标
			var me_top=box.offsetHeight - me.offsetHeight;
			me.style.top=me_top+"px";  //纵坐标
			
					

			function nddj1(){		
				clearInterval(time1); bjgdsj = 10 ; time1=setInterval(t1,bjgdsj)   //背景滚动加快
				clearInterval(time2); scfj=1500 ; time2 = setInterval(t2,scfj);
				box.style.backgroundImage = "url(img/bj1.jpg)" ;
			}
			function nddj2(){
				clearInterval(time1); bjgdsj = 5 ; time1=setInterval(t1,bjgdsj)   //背景滚动加快
				clearInterval(time2); scfj=500 ; time2 = setInterval(t2,scfj);
				box.style.backgroundImage = "url(img/bj2.jpg)" ;
			}
			function nddj3(){
				clearInterval(time1); bjgdsj = 1 ; time1=setInterval(t1,bjgdsj)   //背景滚动加快
				clearInterval(time2); scfj=200 ; time2 = setInterval(t2,scfj);
				box.style.backgroundImage = "url(img/bj3.jpg)" ;
			}			
			function fjdj1(){		//飞机等级1
				zdjl = 2; 
				var sjfj=document.getElementById("me");
				sjfj.innerHTML="<img src='img/m2.png'>";
			}
			function fjdj2(){		//飞机等级2
				zdjl = 5; 
				var sjfj=document.getElementById("me");
				sjfj.innerHTML="<img src='img/m3.png'>";
			}
			function fjdj3(){		//飞机等级3
				zdjl = 7; 
				var sjfj=document.getElementById("me");
				sjfj.innerHTML="<img src='img/m1.png'>";
			}
			function rand(m,n){  //随机数
			return Math.ceil(Math.random()*(n-m+1))+(m-1);}
				
			var num = 0;  //滚动背景				
			var t1=function(){
				num++;
				box.style.backgroundPosition = "0px "+num+"px";		
			}
			var time1=setInterval(t1,bjgdsj)
		
		    window.onkeydown=function(e){  //键盘操作
				if(e.keyCode == 37){
					moveLeft();
				}else if(e.keyCode == 38){
					moveUp();
				}else if(e.keyCode == 39){
					moveRight();
				}else if(e.keyCode == 40){
					moveDown();					
 				}else if(e.keyCode == 32){
					fire();
				}
 			}
			
			window.onkeyup = function(){    //抬起键盘
				clearInterval(meT);
				meT = null;
			}
			
		
			
			function moveLeft(){   //左移
			clearInterval(meT);
			meT = null;
				if(meT == null){
					meT=setInterval(function(){
						var mleft = me.offsetLeft - meyd;
						me.style.left = mleft + "px";
						if(mleft<=0){
							mleft=0;	
							me.style.left = mleft + "px";
						}
					},10)
					
				}
			}
			function moveRight(){    //右移
			clearInterval(meT);
			meT = null;
				if(meT == null){
					meT=setInterval(function(){
						var mleft = me.offsetLeft + meyd;
						me.style.left = mleft + "px";
						var rightbj=box.offsetWidth - me.offsetWidth;  //测量右侧边界
						if(mleft >= rightbj){								
							me.style.left = rightbj + "px";
						}
					},10)
					
				}
			}			
			function moveUp(){     //上移
			clearInterval(meT);
			meT = null;
				if(meT == null){
					meT=setInterval(function(){
						var mtop = me.offsetTop - meyd;
						me.style.top = mtop + "px";
						if(mtop<=300){
							mtop=300;	
							me.style.top = mtop + "px";
						} 
					},10)
					
				}
			}
			function moveDown(){    //下移
			clearInterval(meT);
			meT = null;
				if(meT == null){
					meT=setInterval(function(){
						var mtop = me.offsetTop + meyd;
						me.style.top = mtop + "px";
						var heig =box.offsetHeight - me.offsetHeight;
						if(mtop>=heig){
							me.style.top = heig + "px";
						} 
					},10)
				}
			}
			function fire(){  //开火  生成子弹
				var kh = document.createElement("div");
				kh.innerHTML="<img src ='img/zd.png'>";
				kh.setAttribute("class","zd");
				box.appendChild(kh);
				var zdtop =  me.offsetTop -20 ;
				kh.style.top = zdtop +"px";				
				var zdleft = me.offsetWidth/2 + me.offsetLeft - 5;
				kh.style.left=zdleft + "px";
				var zdt = setInterval(function(){
					var zdfs =kh.offsetTop - zdjl; //子弹速度
					kh.style.top=zdfs +"px";
					if(zdfs <= -35){
						clearInterval(zdt);
						box.removeChild(kh);
					}	 
				var xjs = document.getElementsByClassName("xinjian");
				for(var i= 0;i<xjs.length;i++){   //子弹碰撞飞机
					var minleft = xjs[i].offsetLeft;
					var maxleft = xjs[i].offsetLeft + 120;
					var mintop = xjs[i].offsetTop;
					var maxtop = xjs[i].offsetTop + 120;
					if(zdleft>=minleft && zdleft<=maxleft && zdfs>=mintop && zdfs <=maxtop ){
						clearInterval(zdt);
						box.removeChild(kh);
						var bz=document.getElementById("bz");
						var nbz = bz.cloneNode(true);
						nbz.style.display = "block";
						nbz.style.left = minleft+"px";
						nbz.style.top = mintop+"px";
						box.replaceChild(nbz,xjs[i]);
						setTimeout(function(){
							box.removeChild(nbz);
						},400);	 //爆炸效果时间					
					}					
				}
				},zdsd)
			}
					
				
				var t2=function(){	 //生成敌飞机(div)
				var xj = document.createElement("div");
				var n = rand(1,3);
				xj.innerHTML="<img src='img/d"+n+".png'>";
				xj.setAttribute("class","xinjian");
				var wz=box.offsetWidth - 120;
				var dwz = rand(0,wz);
				xj.style.left = dwz+"px";
				box.appendChild(xj);				
						
				var y=setInterval(function(){  //敌机飞行
					var dtop=xj.offsetTop+ ydjl;
					if(dtop>=box.offsetHeight){
						clearInterval(y);
						box.removeChild(xj);
					} 
					//飞机碰撞死亡
				var sw = document.getElementById("me");
				var mileft = sw.offsetLeft;
				var maleft = sw.offsetLeft + 130;
				var mitop = sw.offsetTop;
				var matop = sw.offsetTop + 65;	
					if( (mileft<=dwz+120 && mileft>=dwz && matop>=dtop && matop<=dtop+120)||(maleft<=dwz+120 && maleft>=dwz && matop>=dtop && matop<=dtop+120) ){
						var wbz=document.getElementById("bz");
						var nwbz = bz.cloneNode(true);
						nwbz.style.display = "block";
						nwbz.style.left = mileft+"px";
						nwbz.style.top = mitop+"px"; 
						box.replaceChild(nwbz,sw);
						setTimeout(function(){
							box.removeChild(nwbz);
						},400);						
					}
					xj.style.top=dtop+"px";
				},fjyd)			
			}	
			var time2 = setInterval(t2,scfj);
		</script>
	</body>
</html>